<!-- 逾期任务，走代办接口，isYq：true -->
<template>
  <div class="table-special-style custom-table-ui">
    <el-table 
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
        type="index"
        width="50">
        <template slot="header" slot-scope="scope">
          序号
        </template>
      </el-table-column>
      <!--<el-table-column
        prop="processTitle"
        label="标题"
        sortable
        width="180">
        <template slot-scope="scope">
          <div class="task-title " @click="openUrl(scope.row.openUrl)">
            {{ scope.row.processTitle }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="processType"
        label="流程类型"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="processCreateUser"
        label="流程创建人"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="trackTime"
        width="120"
        sortable
        label="逾期时间">
        
        <template slot-scope="scope">
          <div :class="{'is-yq': scope.row.isYq}">
            {{ scope.row.dataInfo }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column v-for="(column, index) in tableColumns" :key="column.prop" :label="column.label"
        :min-width="column.width">
        <template slot="header" slot-scope="scoped">
          <template v-if="showAll">
            <span class="column-header">{{ column.label }}</span>
            <el-popover placement="bottom" trigger="click" v-model="popoverVisible[index]" popper-class="table-search-sort"
                @click.native.stop @show="popClick(column,index)">
                <div class="select-pop">
                    <ul class="my-radio">
                        <li class="sort-asc" @click="myRadio('asc',column,index)" >
                            <i class="asc-icon">
                              <svg t="1721878607273" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1456" width="20" height="20">
                                <path
                                    d="M843.84 331.072v434.048a31.488 31.488 0 0 1-9.152 22.848 32.192 32.192 0 0 1-22.912 9.472 32.512 32.512 0 0 1-32-32.32V331.072l-128.192 126.72a31.552 31.552 0 0 1-45.44 0 31.488 31.488 0 0 1 0-44.928l181.312-179.328a31.552 31.552 0 0 1 22.4-9.536 32.896 32.896 0 0 1 23.04 8.32l181.376 179.2a30.912 30.912 0 0 1 0 45.056 32.192 32.192 0 0 1-45.504 0l-124.928-125.44zM32 730.88h512.512c17.728 0 32.064 14.208 32.064 31.68a31.872 31.872 0 0 1-32 31.68H32a31.872 31.872 0 0 1-32-31.68c0-17.472 14.336-31.68 32-31.68z m0-253.44h320.32c17.728 0 32 14.208 32 31.68a31.872 31.872 0 0 1-32 31.68H32.064A31.872 31.872 0 0 1 0 509.12c0-17.472 14.336-31.68 32-31.68zM544.576 224H32.064c-17.728 0-32 14.208-32 31.68s14.272 31.68 32 31.68h512.512c17.728 0 32-14.208 32-31.68a31.872 31.872 0 0 0-32-31.68z"
                                    fill="#8a8a8a" p-id="1457"></path>
                              </svg>
                            </i>
                            <span class="sort-text">按A→Z排序</span>
                            <i v-if="column.selectedSort === 'asc'" class="el-icon-check sort-check-icon"></i>
                        </li>
                        <li class="sort-desc" @click="myRadio('desc',column,index)">
                          <i class="asc-icon">
                            <svg t="1721878904715" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6918" width="20" height="20">
                                <path
                                    d="M843.84 690.368V256.32a31.488 31.488 0 0 0-9.152-22.848 32.192 32.192 0 0 0-22.912-9.472 32.512 32.512 0 0 0-32 32.32v434.048l-128.192-126.72a31.552 31.552 0 0 0-45.44 0 31.488 31.488 0 0 0 0 44.928l181.312 179.328a31.552 31.552 0 0 0 22.4 9.536 32.896 32.896 0 0 0 23.04-8.32l181.376-179.2a30.912 30.912 0 0 0 0-45.056 32.192 32.192 0 0 0-45.504 0l-124.928 125.44zM32 730.88h512.512c17.728 0 32.064 14.208 32.064 31.68a31.872 31.872 0 0 1-32 31.68H32a31.872 31.872 0 0 1-32-31.68c0-17.472 14.336-31.68 32-31.68z m0-253.44h320.32c17.728 0 32 14.208 32 31.68a31.872 31.872 0 0 1-32 31.68H32.064A31.872 31.872 0 0 1 0 509.12c0-17.472 14.336-31.68 32-31.68zM544.576 224H32.064c-17.728 0-32 14.208-32 31.68s14.272 31.68 32 31.68h512.512c17.728 0 32-14.208 32-31.68a31.872 31.872 0 0 0-32-31.68z"
                                    fill="#8a8a8a" p-id="6919"></path>
                            </svg>
                          </i>
                          <span class="sort-text">按Z→A排序</span>
                          <i v-if="column.selectedSort === 'desc'" class="el-icon-check sort-check-icon"></i>
                        </li>
                    </ul>
                    <el-input v-model="column.filterKeyword" placeholder="请输入筛选关键词" size="mini"
                        suffix-icon="el-icon-search" @change="searchTaskFn(column,index)"></el-input>
                </div>
                <i class="el-icon-caret-bottom" slot="reference" :class="{'sort-active': column.selectedSort !== ''}"></i>
            </el-popover>
          </template>
          <template v-else>
            <span class="column-header">{{ column.label }}</span>
            <span class="custom-column-sort">
              <i class="up-arrow" :class="{'sort-active': column.selectedSort == 'asc'}" @click="myRadio2('asc',column,index)"></i>
              <i class="down-arrow" :class="{'sort-active': column.selectedSort == 'desc'}" @click="myRadio2('desc',column,index)"></i>
            </span>
          </template>
        </template>
        <template slot-scope="scope">
          <div v-if="column.prop == 'processTitle'" class="task-title" :title="scope.row.processTitle" @click="openUrl(scope.row.openUrl)">
            <span :class="{'status-icon': scope.row.isImportant}"></span>
            {{ scope.row.processTitle }}
          </div>
          <div v-else-if="column.prop == 'dataInfo'" :class="{'is-yq': scope.row.isYq}">
            {{ scope.row.dataInfo }}
          </div>
          <div class="one-line" v-else :title="scope.row[column.prop].length > 10 ? scope.row[column.prop] : ''">
            {{ scope.row[column.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: '',
    mixins: [],
    components: {
    },
    props: {
      showAll: Boolean,
      tableData: Array
    },
    data () {
      return {
        sid: this._sid,
        tableColumns: [
          { prop: "processTitle", label: "标题", sortType: "asc", filterKeyword: "", selectedSort: '' , width: '150px'},
          { prop: "processType", label: "流程类型", sortType: "", filterKeyword: "", selectedSort: '' },
          { prop: "fromUser", label: "流程创建人", sortType: "", filterKeyword: "", selectedSort: '' },
          { prop: "dataInfo", label: "逾期时间", sortType: "", filterKeyword: "", selectedSort: '' },
        ],
        popoverVisible: [],
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {
      
    },
    methods: {
      openUrl(url) {
        window.open(url)
      },
      searchTaskFn(column,index) {
        this.$emit('searchTaskFn', {type: 'timeout', column : column, index: index})
      },
      myRadio2(part, item, idx) {
        this.tableColumns[idx].selectedSort = part;
        console.log('part', this.tableColumns[idx])
        this.$emit('sortTaskFn', {type: 'timeout', column : this.tableColumns[idx], index: idx})
      },
    }
  }
</script>

<style scoped lang="scss">
  .is-yq {
    color: #f65e54;
  }
</style>
